<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<form>
		游戏：<input type="checkbox" name="love" value="game">
		电影：<input type="checkbox" name="love" value="movie">
		编码：<input type="checkbox" name="love" value="program">
		<input type="button" value="全选" id="selectAll">
		<input type="button" value="取消" id="cancel">
		<input type="button" value="反选" id="reverse">
	</form>
	<script type="text/javascript">
		var selectAll = document.querySelector('#selectAll')
		var cancel = document.querySelector('#cancel')
		var reverse = document.querySelector('#reverse')
		selectAll.onclick = function() {
			var love = document.querySelectorAll('input[name="love"]');
			console.log(love)
			for(var i = 0;i < love.length; i++) {
				love[i].checked = 'checked';
			}
		}
		cancel.onclick = function() {
			var love = document.querySelectorAll('input[name="love"]');
			console.log(love)
			for(var i = 0;i < love.length; i++) {
				love[i].checked = '';
			}
		}
		reverse.onclick = function() {
			var love = document.querySelectorAll('input[name="love"]');
			console.log(love)
			for(var i = 0;i < love.length; i++) {
				love[i].checked = !love[i].checked;
			}
		}
	</script>
</body>
</html>